<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div style="position: relative;">
        <el-tabs>
            <el-tab-pane label="详情信息">
                <el-descriptions title="用户信息">
                    <el-descriptions-item label="用户名">{{ customer.name }}</el-descriptions-item>
                    <el-descriptions-item label="手机号">{{ customer.mobile }}</el-descriptions-item>
                    <el-descriptions-item label="进度">
                        <el-tag size="small" :type="stepTextType(customer.step)">{{ stepText(customer.step) }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="意向厂房">{{ customer.post_title }}</el-descriptions-item>
                    <el-descriptions-item label="意向户型">{{ customer.intent }}</el-descriptions-item>
                    <el-descriptions-item label="推荐时间">{{ customer.created_at }}</el-descriptions-item>
                    <el-descriptions-item label="最新保护期">{{ customer.expired_at }}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{ customer.remark }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="对接置业顾问" v-if="customer.broker_profile">
                    <el-descriptions-item label="姓名">{{ customer.broker_profile.name }}</el-descriptions-item>
                    <el-descriptions-item label="电话">{{ customer.broker_profile.mobile }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="推荐人" v-if="customer.source_name">
                    <el-descriptions-item label="姓名">{{ customer.source_name }}</el-descriptions-item>
                    <el-descriptions-item label="电话">{{ customer.source_mobile }}</el-descriptions-item>
                </el-descriptions>
                <template v-if="customer.step == 0 && customer.status">
                    <el-descriptions title="确认带看二维码"></el-descriptions>
                    <div style="width: 180px;height: 180px;margin: 0 auto;">
                        <QRCode :value="qrText" size="180" class="qrimg"></QRCode>
                    </div>
                </template>

            </el-tab-pane>
            <el-tab-pane label="操作日志">
                <el-table :data="logs">
                    <el-table-column prop="content" label="操作内容" />
                    <el-table-column prop="operator" label="操作人" :width="70" />
                    <el-table-column prop="created_at" label="操作时间" :width="170" />
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-image style="width: 160px; height: 160px; margin-left: 8px;position: absolute;top: 0;right: 0;"
            v-if="!customer.status" :src="require('@/assets/images/shixiao.svg')"></el-image>
    </div>
</template>

<style>
.brokers {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.brokers .blank {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
}

.brokers .broker image {
    height: 80px;
    width: 80px;
    border-radius: 80px;
    border: 1px solid #cecece;

}

.brokers .broker .name {
    margin-top: 10px;
}

.brokers .broker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

<script>

import { getReportCustomer, getReportCustomerLogs } from '@/api/report-customer'
import QRCode from 'qrcode.vue'
export default {
    props: {
        customerId: { type: Number, default: null },
    },
    components: { QRCode },
    data() {
        return {
            status: null,
            statusReasonItems: [
                { label: '超过报备保护期' },
                { label: '客户信息填写错误' },
                { label: '关联房源选择错误' },
                { label: '其他原因' },
            ],
            customer: {},
            currentUser: this.$store.state.user,
            loading: false,
            logs: [],
        }
    },

    computed: {
        qrText: function () {
            return '/pkgFenxiao/pages/fenxiao/confirm?uid=' + this.customer.uid
        },
    },

    watch: {
        'customerId': {
            immediate: true,
            deep: true,
            handler(val, oval) {
                if (!this.customerId) {
                    return false;
                }
                this.loadData()

            }
        }
    },

    methods: {

        stepText: function (i) {
            switch (i) {
                case 0:
                    return "报备";
                case 1:
                    return "带看";
                case 2:
                    return "认购";
                case 3:
                    return "签约";
                case 4:
                    return "结佣";
                default:
                    return "未知";
            }
        },
        stepTextType: function (i) {
            switch (i) {
                case 0:
                    return "primary";
                case 1:
                    return "success";
                case 2:
                    return "warning";
                case 3:
                    return "danger";
                case 4:
                    return "info";
                default:
                    return "info";
            }
        },


        loadData: function () {
            this.loading = true

            getReportCustomer(this.customerId).then((resp) => {
                this.loading = false
                if (resp.status != 0) {
                    return
                }
                var customer = resp.data
                // 设置默认值
                if (customer.status == 1) {
                    customer.status = 2
                }
                this.customer = customer
            })
            getReportCustomerLogs(this.customerId).then((resp) => {
                this.loading = false
                if (resp.status != 0) {
                    return
                }
                this.logs = resp.data
            })
        },

    }

}
</script>
